﻿@section header {
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.regModel('memoModel', {
                fields: [
                    { name: 'ID', type: 'string' },
                    { name: 'Name', type: 'string' },
                    { name: 'Content', type: 'string' },
                    { name: 'CreateTime', type: 'date', dateFormat: 'MS' }
                ]
            });

            Ext.create('Ext.data.Store', {
                id: 'memoStore',
                model: 'memoModel',
                //                data: [
                //                    { Name: 'http://www.sencha.com/img/20110215-feat-drawing.png', Content: 'Drawing & Charts' },
                //                    { Name: 'http://www.sencha.com/img/20110215-feat-data.png', Content: 'Advanced Data' },
                //                    { Name: 'http://www.sencha.com/img/20110215-feat-html5.png', Content: 'Overhauled Theme' },
                //                    { Name: 'http://www.sencha.com/img/20110215-feat-perf.png', Content: 'Performance Tuned' }
                //                ]
                proxy: {
                    type: 'ajax',
                    url: '/data/Memo/index'
                },
                listeners: {
                    load: function (store, records, successful) {
                        //debugger;
                        if (!successful) {
                            alert("Error!");
                        }
                        else {

                        }
                    }
                },
                autoLoad: true
            });


            var grid = Ext.create('Ext.grid.Panel', {
                region: 'center',
                store: Ext.data.StoreManager.lookup('memoStore'),
                border: 1,
                columns: [
                    new Ext.grid.RowNumberer(),
                    {
                        xtype: 'templatecolumn',
                        header: '标题',
                        tpl: '<a href="javascript:debugger;alert(\'{ID}\')">{Name}</a>',
                        flex: 1
                    },
                    {
                        header: '内容',
                        dataIndex: 'Content',
                        flex: 3,
                        renderer: function (v) {
                            return '<div title="' + Ext.util.Format.stripTags(v) + '">' + Ext.String.ellipsis(Ext.util.Format.stripTags(v), 10) + '</div> ';
                        }
                    },
                    {
                        header: '创建时间',
                        dataIndex: 'CreateTime',
                        width: 120,
                        renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                    },
                    {
                        xtype: 'actioncolumn',
                        header: '操作',
                        width: 70,
                        align: 'center',
                        dataIndex: 'ID',
                        items: [{
                            icon: '/content/images/cog_edit.png',  // Use a URL in the icon config 
                            tooltip: 'Edit',
                            iconCls: 'actioncolumn',
                            handler: function (grid, rowIndex, colIndex) {
                                //debugger;
                                var rec = grid.getStore().getAt(rowIndex);
                                MemoNewOrEdit(rec.get('ID'));
                            }
                        }, {
                            icon: '/content/images/delete.gif',
                            tooltip: 'Delete',
                            iconCls: 'actioncolumn',
                            handler: function (grid, rowIndex, colIndex) {
                                alert('暂未实现!');
                            }
                        }]
                    }
                    ],
                tbar: [
                    { xtype: 'button', iconCls: 'iconNew', tooltip: '新增', tooltipType: 'title', handler: function (source, e) { MemoNewOrEdit() } },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbfill' },
                    {
                        xtype: 'button',
                        iconCls: 'iconRefresh',
                        text: '',
                        tooltip: '刷新',
                        tooltipType: 'title',
                        handler: function (source, e) {
                            this.up('panel').getStore().load(); ;
                        }
                    }
                    ],
                listeners: {
                    selectionchange: function (sm, selectedRecords) {
                        if (selectedRecords.length) {
                            Ext.getCmp('DetailPanel').setTitle(selectedRecords[0].data.Name + ' - 详细内容');
                            bookTpl.overwrite(Ext.getCmp('DetailPanel').body, selectedRecords[0].data);
                        }
                    }
                }
            });

            var panel = Ext.create('Ext.panel.Panel', {
                region: 'center',
                layout: 'border',
                autoScroll: true,
                bodyPadding: 4,
                padding: 0,
                margin: 0,
                items: [
                    grid,
                    {
                        id: 'DetailPanel',
                        region: 'south',
                        bodyPadding: 10,
                        title: '便笺内容',
                        height: 300,
                        split: true,
                        border: 1
                    }
                ],
                tbar: [
                    { xtype: 'label', text: '当前位置：个人办公 -> 我的便笺', cls: 'formNav' },
                    { xtype: 'tbseparator' },
                    { xtype: 'tbfill' },
                    { xtype: 'button', iconCls: 'helpIcon', tooltip: '帮助', tooltipType: 'title', handle: function (source, e) { alert('帮助!') } }
                    ]
            });

            var bookTplMarkup = [
                '<div style="border:solid 1px #EEE;padding:4px; background:url(/content/images/memo.png) no-repeat 6px 4px; padding-left:60px;background-color:#EFEFEF;">',
                '<span style="display:block; padding:4px;">标题:&nbsp;&nbsp;{Name}</span>',
                '<span style="display:block; padding:4px;">时间:&nbsp;&nbsp;{CreateTime:date(\"Y-m-d H:i:s\")}</span>',
                '</div>',
                '<div style="border:solid 0px #CCC;padding:4; margin-top: 10px;">{Content}</div>',
            ];

            var bookTpl = Ext.create('Ext.Template', bookTplMarkup);


            new Ext.container.Viewport({
                layout: 'fit',
                border: 0,
                items: [panel]
            });

            var MemoNewOrEdit = function (id) {
                new Ext.window.Window({
                    id: 'MemoWin',
                    title: '便笺编辑',
                    modal: true,
                    closable: true,
                    //animateTarget: this,
                    width: 600,
                    //height: 500,
                    layout: 'fit',
                    bodyPadding: 0,
                    items: [
                        new MB.form.Memo({
                            id: id,
                            close: function () { Ext.getCmp('MemoWin').close(); },
                            submitSccess: function (form, action) { grid.getStore().load(); alert("submitSccess"); this.close(); },
                            submitFailure: function (form, action) { alert("submitFailure"); }
                        })
                    ]
                }).show();
            }
        });
    </script>
}
